<template>
  <div></div>
  <!-- <div
    v-if="bannerData && bannerData.single_pic"
    class="banner"
    :style="{ 'background-image': `url(${bannerData.single_pic})` }"
  >
    <Container padding-top="0px" padding-bottom="0px">
      <div class="inner">
        <div class="title">{{ bannerData.title }}</div>
        <div class="desc">{{ bannerData.descri }}</div>
      </div>
    </Container>
  </div> -->
</template>

<script setup lang="ts">
import { ref, onBeforeMount, watch } from "vue";
import { postBannerList } from "../api/banner";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
const route = useRoute();

// const bannerData = ref();
// const getBannerData = async () => {
//   let type_id = parseInt(route.query.type_id as string);
//   let res = await postBannerList(type_id);
//   if (res.code === 200) {
//     bannerData.value = (res.data && res.data[0]) || {};
//   }
// };

// watch(route, (newRoute) => {
//   getBannerData(); // 路由变化时重新获取数据  // 注意: 这个地方需要根据你的需求来实现  // 例如在某些特定路由下不获取数据
// });

// onMounted(() => {
//   getBannerData()
// })

// onBeforeMount(() => {
//   getBannerData();
// });
</script>
<style scoped lang="less">
.banner {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 55vh;
  .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #172026;
    font-size: 48px;
    font-weight: 600;
    padding-top: 150px;
  }
}

@media screen and (max-width: 768px) {
  .banner {
    display: none;
  }
}
</style>
